<template>
  <div class='preview-art'>
    <h2>{{form.title}}</h2>
    <div>
      <span>{{form.createTime}}</span>
      <span>超级管理员</span>
      <span class='el-icon-view'></span>
      <span>{{form.visits}}</span>
    </div>
    <div class="content">
      <el-divider></el-divider>
      <template>
        <span v-html="form.articleBody"></span>
      </template>
    </div>
  </div>
</template>

<script>
import { detail } from '@/api/hmmm/articles'
import { rTime } from '@/filters/index'
export default {
  props: {
    // 接收从复组件中传入的公司编号
    articleId: {
      type: [String, Number], // 这个属性可以是字符串，也可以是Number
      required: false // 这个属性并不是必须的
    }
  },
  data () {
    return {
      form: {
        articleBody: '',
        createTime: '',
        creatorID: null,
        id: null,
        state: null,
        title: '',
        videoURL: null,
        visits: 0
      }
    }
  },
  methods: {
    doSearch (id) {
      detail({ id: id }).then(response => {
        response.data.createTime = rTime(response.data.createTime)
        this.form = response.data
      }).catch(error => {
        console.log(error)
        this.$message.error('查询失败!')
      })
    }
  },
  created () {
    this.doSearch(this.articleId)
  }
}
</script>

<style scoped rel="stylesheet/scss" lang='scss'>
.el-divider--horizontal{
     margin: 8px 0;
     background: 0 0;
     border-top: 1.5px dashed #c5c5c5;
 }
 .content {
   background-color: #f5f5f5;
 }
 span {
   margin-right: 15px;
 }
</style>
